<template>
  <div class="all">
    <!-- <div class="informa"> -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline=true>
      <div class="informa">
        <div class="tetli"> 基本信息</div>
        <!-- <el-form-item label="账号" prop="userId">
          <el-input v-model="ruleForm.userId" placeholder="请输入账号"></el-input>
        </el-form-item> -->
        <el-form-item label="商户名称" prop="mchName">
          <el-input disabled v-model="ruleForm.mchName" placeholder="请输入商户名称"></el-input>
        </el-form-item>
         <el-form-item label="商户编码" prop="mchName">
          <el-input disabled v-model="ruleForm.mchNo" placeholder="请输入商户编码"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="taxpayerNo">
          <el-input disabled v-model="ruleForm.taxpayerNo" placeholder="请输入纳税人识别号"></el-input>
        </el-form-item>
        <el-form-item label="法人代表" prop="ledgerName">
          <el-input disabled v-model="ruleForm.ledgerName" placeholder="请输入法人代表"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="contactPhone">
          <el-input disabled type="number" v-model="ruleForm.contactPhone" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="商户电话" prop="landline" class="phones"> 
          <el-input disabled type="number" v-model="ruleForm.landline" placeholder="请输入商户电话"></el-input>
        </el-form-item>
      </div>
      <div class="informa aptitudes">
        <div class="tetli"> 资质信息</div>
        <div>
            <div class="aptitudes">
               <el-form-item label="上传营业执照:" prop="licenseVerify" class="updata open">
                <el-upload
                  action="https://portals.haier-ioc.com/cloudApi/datacenter/file/uploadFile"
                  :data="{projectId: 4,useDay:1,path:'upload/portals/marchant'}"
                  list-type="picture-card"
                  :file-list="fileList"
                   :on-change="licenseVerifyChange"
                  :on-preview="licensePictureCardPreview"
                  :on-success="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                 <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" style="object-fit: cover;"/>
                </el-dialog>
              </el-form-item>
            
             <el-form-item label="上传税务登记证:" prop="taxRegVerify" class="updata">
                <el-upload
                  action="https://portals.haier-ioc.com/cloudApi/datacenter/file/uploadFile"
                  :headers="header"
                  :data="{projectId: 4,useDay:1,path:'upload/portals/marchant'}"
                  list-type="picture-card"
                  :file-list="fileLis"
                   :on-change="taxRegVerifyChange"
                   :on-preview="taxRegPictureCardPreview"
                  :on-success="handlePictureCardPreviewb"
                  :on-remove="handleRemoveb">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="taxRegBialogVisible">
                  <img width="100%" :src="taxRegDialogImageUrl" alt="">
                 </el-dialog>
                  <!-- <img width="100%" :src="dialogImageUrlb" alt=""> -->
             </el-form-item>
            
              <el-form-item label="上传法人身份证正面:" prop="idcardFrontVerify" class="updata open" > 
                  <el-upload
                  action="https://portals.haier-ioc.com/cloudApi/datacenter/file/uploadFile"
                  :data="{projectId: 4,useDay:1,path:'upload/portals/marchant'}"
                  list-type="picture-card"
                  :on-preview="idcardFrontPictureCardPreview"
                  :on-success="handlePictureCardPreviewc"
                   :file-list="fileLi"
                   :on-change="idcardFrontVerifyChange"
                  :on-remove="handleRemovec">
                  <i class="el-icon-plus"></i>
                </el-upload>
                  <el-dialog :visible.sync="idcardFrontBialogVisible">
                  <img width="100%" :src="idcardFrontDialogImageUrl" alt="" style="object-fit: cover;"/>
                 </el-dialog>
                  <!-- <img class="updata_img" width="100%" :src="dialogImageUrlc" alt="">
               -->
              </el-form-item>
            
           
              <el-form-item label="上传法人身份证反面:" prop="idcardBackVerify" class="updata">
                  <el-upload
                  action="https://portals.haier-ioc.com/cloudApi/datacenter/file/uploadFile"
                  :data="{projectId: 4,useDay:1,path:'upload/portals/marchant'}"
                  list-type="picture-card"
                   :file-list="fileL"
                   :on-preview="idcardBackPictureCardPreview"
                  :on-success="handlePictureCardPreviewd"
                  :on-change="idcardBackVerifyChange"
                  :on-remove="handleRemoved">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="idcardBackBialogVisible">
                  <img width="100%" :src="idcardBackDialogImageUrl" alt="" style="object-fit: cover;"/>
                 </el-dialog>
                  <!-- <img width="100%" :src="dialogImageUrld" alt=""> -->
               
              </el-form-item>
            
          </div>
        </div>
        
      </div>
      <!-- 上传凭证 -->
      <div class="informa aptitudes">
        <div class="tetli">上传凭证</div>
        <div>
            <div class="aptitudes">
               <el-form-item label="打款凭证:" prop="PaymentVouchercss" class="updata open">
                <el-upload
                  action="https://portals.haier-ioc.com/cloudApi/datacenter/file/uploadFile"
                  :data="{projectId: 4,useDay:1,path:'upload/portals/marchant'}"
                  list-type="picture-card"
                  :file-list="file"
                  :on-preview="PaymentVoucher"
                  :on-success="handlecertificates"
                  :on-change="PaymentVoucherChange"
                  :on-remove="certificatesRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                  <el-dialog :visible.sync="PaymentVoucherVisible">
                  <img width="100%" :src="PaymentVoucherImageUrl" alt="" style="object-fit: cover;"/>
                 </el-dialog>
              </el-form-item>
            
             <el-form-item label="合同:" prop="PaymentContractcss" class="updata">
                <el-upload
                  action="https://portals.haier-ioc.com/cloudApi/datacenter/file/uploadFile"
                  :headers="header"
                  :data="{projectId: 4,useDay:1,path:'upload/portals/marchant'}"
                  list-type="picture-card"
                  :file-list="fil"
                  :class="{hide:hideUpload}"
                   :on-change="uploadChange"
                  :on-preview="PaymentContract"
                  :on-success="handlcontract"
                  :on-remove="contractRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                 <el-dialog :visible.sync="PaymentContractVisible">
                  <img width="100%" :src="PaymentContractImageUrl" alt="" style="object-fit: cover;"/>
                 </el-dialog>
             </el-form-item>
          </div>
        </div> 
      </div>
      <!-- 银行开户信息 -->
      <div class="informa">
        <div class="tetli">银行开户信息</div>
        <el-form-item label="开户名称" prop="bankcard.bankName">
          <el-input disabled v-model="ruleForm.bankcard.bankName" placeholder="请输入开户名称"></el-input>
        </el-form-item>
        <el-form-item label="银行账户" prop="bankcard.bankcardNumber">
          <el-input disabled v-model="ruleForm.bankcard.bankcardNumber" type="number" placeholder="请输入银行账户"></el-input>
        </el-form-item>
        <el-form-item label="银行卡类型" prop="bankcard.bankcardType">
           <el-select disabled v-model="ruleForm.bankcard.bankcardType" placeholder="请选择银行卡类型" clearable style="width:40vw;">
            <el-option v-for="item in bankcardType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户地址" prop="bankcard.address">
          <el-input disabled v-model="ruleForm.bankcard.address" placeholder="请输入开户地址"></el-input>
        </el-form-item>
        <el-form-item label="开户预留电话" prop="bankcard.bankPhone">
           <el-input disabled v-model="ruleForm.bankcard.bankPhone" placeholder="请输入开户预留电话"></el-input>
        </el-form-item>
        <p class="tjbzj">温馨提示：为了保证您的审核进度，请及时联系业务人员提交保证金。</p>
        <p class="agree"> 
          <el-form-item>  
            <el-checkbox v-model="checked">我已阅读并同意<a>《用户协议》</a></el-checkbox>
          </el-form-item>
        </p>
        <div style="text-align:right"><el-button type="primary" @click="submitForm('ruleForm')">确认</el-button> <el-button @click="cancel">取消</el-button></div>
      </div>
    </el-form>
    <!-- </div> -->
  </div>
</template>

<script>
import { upload } from '@/components/upload-elementui'
import { qualifications,merchantss, } from '@/api/distribution'
export default {
  data() {
    return {
      fileList: [],
      fileLis: [],
      fileLi: [],
      fileL: [],
      file: [],
      fil: [],
      imgBaseUrl: `${process.env.VUE_APP_FILE_URL}/`,
      checked: false,
      header:{ContentType:"multipart/form-data"},
       dialogImageUrld: false,
       dialogImageUrlc: false,
       dialogImageUrlb: false,
        uploadShow:false,
        dialogImageUrl: false,
        dialogVisiblea: false,
        dialogVisibleb: false,
        dialogVisiblec: false,
        dialogVisibled: false,
        headFile: '',
        headFileList: '',
      hideUpload: false,
      limitCount: 1,
      dialogVisible: false,//营业执照弹窗
      taxRegBialogVisible: false,//税务登记弹窗
      idcardFrontBialogVisible: false,//身份证正面弹窗
      idcardBackBialogVisible: false,//身份证反面弹窗
      PaymentVoucherVisible:false,//打款凭证弹窗
      PaymentContractVisible:false,//合同弹窗
      dialogImageUrl: '',//营业执照弹窗图片地址
      taxRegDialogImageUrl: '',//税务登记弹窗图片地址
      idcardFrontDialogImageUrl: '',//身份证正面弹窗图片地址
      idcardBackDialogImageUrl: '',//身份证反面弹窗图片地址
      PaymentVoucherImageUrl:'',//打款凭证弹窗图片地址
      PaymentContractImageUrl:'',//合同弹窗图片地址
      ruleForm: {
       id:'',//商户id
       userId: '',
       mchName:'',
       mchType:2,
       saleMode:0,
       mchNo:'',
       taxpayerNo:'',//纳税人识别号
       ledgerName:'',//法人名称
       contactPhone:'',//联系电话
       landline:'',//商户电话
      //  licenseCode:'',//营业执照编码可传可不传
       licenseImg:'',//营业执照图片
       taxRegistrationImg:'',//税务登记图片
       idcardFrontImg:'',//法人身份证正面图片
       idcardBackImg:'',//法人身份证反面图片
       paymentVoucher:'',//打款凭证
       contractFile:'',//合同
       creatorId:'1',  
      //  enableStatus:'',//启用状态：0启用，1禁用
       bankcard:{
        //  targetId:'',//目标id
        //  userType:'',//用户类型 0 商户 1 店铺 2 用户  
        //  bankcardImg:'',//银行LOGO
         bankName:'',//开户行名称
         bankcardNumber:'',//银行账号
         bankcardType:'',//银行卡类型 0 借记卡 1 储蓄卡 3 信用卡
         address:'',//开户行地址
         bankPhone:'',//银行预留手机号
       },
        
      },

      bankcardType:[{value: 0, label: "借记卡"},{value: 1, label: "储蓄卡"},{value: 2, label: "信用卡"}],
      rules: {
        userId: [{ required: true, message: '请输入账号', trigger: 'blur' },],
        mchName:[ { required: true, message: '请输入商户名', trigger: 'blur' }],
        mchNo:[{ required: true, message: '请输入商户编码', trigger: 'blur' }],
        taxpayerNo:[ { required: true, message: '请输入纳税人识别号', trigger: 'blur' },],
        ledgerName:[ { required: true, message: '请输入法人名字', trigger: 'blur' }],
        contactPhone:[{ required: true, message: '请输入手机号码', trigger: 'blur' },
        { min: 11, max: 11, message: '您输入的数字个数不符', trigger: 'blur' }],
        landline:[{ required: true, message: '请输入商家电话', trigger: 'blur' }],
        PaymentVouchercss:[{ required: true, message: '请上传打款凭证附件' }],
        PaymentContractcss:[{ required: true, message: '请上传合同附件' }],
        bankcard:{
            bankName:[{ required: true, message: '请输入开户名称', trigger: 'blur' }],
            bankcardNumber:[{ required: true, message: '请输入银行账户', trigger: 'blur' }],
            bankcardType:[{ required: true, message: '请输入银行卡类型', trigger: 'blur' }],
            address:[{ required: true, message: '请输入开户地址', trigger: 'blur' }],
            bankPhone:[{ required: true, message: '请输入开户预留电话', trigger: 'blur' }],
        }
      }
    }
  },
  computed:{
    item(){
      return this.$route.params.item
    }
  },
  created(){
    this.merchants()
  },
  methods: {
      async merchants() {//查询供应商提交资质
      let res = await qualifications({
        userId:JSON.parse(this.$store.state.user.userInfo).id,//用户id
      })
      if(res.code == 200){
          this.ruleForm = res.data
          console.log( res)
          // this.ruleForm.id = res.data.id //商户id
          let licenseImgs = { name:'', url:this.imgBaseUrl + res.data.licenseImg}
          this.fileList.push(licenseImgs)
          let taxRegistrationImgs = { name:'', url:this.imgBaseUrl + res.data.taxRegistrationImg}
          this.fileLis.push(taxRegistrationImgs)
          let idcardFrontImgs = { name:'', url:this.imgBaseUrl + res.data.idcardFrontImg}
          this.fileLi.push(idcardFrontImgs)
          let idcardBackImgs = { name:'', url:this.imgBaseUrl + res.data.idcardBackImg}
          this.fileL.push(idcardBackImgs)  
      }
    },
     handleRemove(file, fileList) {//上传营业执照删除
        if(fileList.length==0){
            this.rules.licenseVerify = [{ required: true, message: '请上传营业执照附件', trigger: 'change'}];
          }
         this.hideUpload = fileList.length >= this.limitCount;
      },
      handlePictureCardPreview(res) {//上传营业执照成功
      if(res.code == 200){
        this.$message({ message: '上传成功',type: 'success'});
          this.ruleForm.licenseImg = res.data.fileUrl
      }else{
         this.$message.error('上传失败');
      }
      },
      licensePictureCardPreview(file) {//查看营业执照
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
       licenseVerifyChange(file, fileList) {//上传成功清空验证文字
            this.headFile = file;
            this.headFileList = fileList;
            if(fileList.length==1) {
                let {licenseVerify, ...data} = this.rules.licenseVerify;
                this.rules.licenseVerify = data;
            }
            this.$refs.ruleForm.clearValidate('licenseVerify');
            this.hideUpload = fileList.length >= this.limitCount;
        },
      handleRemoveb(file, fileList) {//上传税务登记证删除
         if(fileList.length==0){
            this.rules.taxRegVerify = [{ required: true, message: '请上传税务登记证附件', trigger: 'change'}];
          }
         this.hideUpload = fileList.length >= this.limitCount;
      },
      handlePictureCardPreviewb(res) {//上传税务登记证成功
     if(res.code == 200){
        this.$message({ message: '上传成功',type: 'success'});
          this.ruleForm.taxRegistrationImg = res.data.fileUrl
      }else{
         this.$message.error('上传失败');
      }
      },
      taxRegPictureCardPreview(file) {//查看税务登记
        this.taxRegDialogImageUrl = file.url;
        this.taxRegBialogVisible = true;
      },
       taxRegVerifyChange(file, fileList) {//上传成功清空验证文字
            this.headFile = file;
            this.headFileList = fileList;
            if(fileList.length==1) {
                let {taxRegVerify, ...data} = this.rules.taxRegVerify;
                this.rules.taxRegVerify = data;
            }
            this.$refs.ruleForm.clearValidate('taxRegVerify');
            this.hideUpload = fileList.length >= this.limitCount;
        },
       handleRemovec(file, fileList) {//上传法人身份证正面删除
         if(fileList.length==0){
            this.rules.idcardFrontVerify = [{ required: true, message: '请上传法人身份证正面附件', trigger: 'change'}];
          }
         this.hideUpload = fileList.length >= this.limitCount;
      },
      handlePictureCardPreviewc(res) {//上传法人身份证正面成功
       if(res.code == 200){
        this.$message({ message: '上传成功',type: 'success'});
          this.ruleForm.idcardFrontImg = res.data.fileUrl
      }else{
         this.$message.error('上传失败');
      }
      },
       idcardFrontPictureCardPreview(file) {//查看身份证正面
        this.idcardFrontDialogImageUrl = file.url;
        this.idcardFrontBialogVisible = true;
      },
       idcardFrontVerifyChange(file, fileList) {//上传成功清空验证文字
            this.headFile = file;
            this.headFileList = fileList;
            if(fileList.length==1) {
                let {idcardFrontVerify, ...data} = this.rules.idcardFrontVerify;
                this.rules.idcardFrontVerify = data;
            }
            this.$refs.ruleForm.clearValidate('idcardFrontVerify');
            this.hideUpload = fileList.length >= this.limitCount;
        },
      handleRemoved(file, fileList) {//上传法人身份证反面删除
        if(fileList.length==0){
            this.rules.idcardBackVerify = [{ required: true, message: '请上传身份证国徽面附件', trigger: 'change'}];
          }
         this.hideUpload = fileList.length >= this.limitCount;
      },
      handlePictureCardPreviewd(res) {//上传法人身份证反面成功
        if(res.code == 200){
        this.$message({ message: '上传成功',type: 'success'});
          this.ruleForm.idcardBackImg = res.data.fileUrl
      }else{
         this.$message.error('上传失败');
      }
      },
      idcardBackPictureCardPreview(file) {//查看身份证反面
        this.idcardBackDialogImageUrl = file.url;
        this.idcardBackBialogVisible = true;
      },
       idcardBackVerifyChange(file, fileList) {//上传成功清空验证文字
            this.headFile = file;
            this.headFileList = fileList;
            if(fileList.length==1) {
                let {idcardBackVerify, ...data} = this.rules.idcardBackVerify;
                this.rules.idcardBackVerify = data;
            }
            this.$refs.ruleForm.clearValidate('idcardBackVerify');
            this.hideUpload = fileList.length >= this.limitCount;
        },
      certificatesRemove(file, fileList) {//上传打款凭证删除
         if(fileList.length==0){
            this.rules.PaymentVouchercss = [{ required: true, message: '请上传打款凭证附件', trigger: 'change'}];
          }
         this.hideUpload = fileList.length >= this.limitCount;
      },
      handlecertificates(res) {//上传打款凭证成功
        if(res.code == 200){
        this.$message({ message: '上传成功',type: 'success'});
          this.ruleForm.paymentVoucher = res.data.fileUrl
      }else{
         this.$message.error('上传失败');
      }
      },
       PaymentVoucher(file) {//查看打款凭证
        this.PaymentVoucherImageUrl = file.url;
        this.PaymentVoucherVisible = true;
      },
      PaymentVoucherChange(file, fileList) {//上传成功清空验证文字
            this.headFile = file;
            this.headFileList = fileList;
            if(fileList.length==1) {
                let {PaymentVouchercss, ...data} = this.rules.PaymentVouchercss;
                this.rules.PaymentVouchercss = data;
            }
            this.$refs.ruleForm.clearValidate('PaymentVouchercss');
            this.hideUpload = fileList.length >= this.limitCount;
        },
      contractRemove(file, fileList) {//上传合同删除
        if(fileList.length==0){
            this.rules.PaymentContractcss = [{ required: true, message: '请上传合同附件', trigger: 'change'}];
          }
         this.hideUpload = fileList.length >= this.limitCount;
      },
      handlcontract(res) {//上传合同成功
        if(res.code == 200){
        this.$message({ message: '上传成功',type: 'success'});
          this.ruleForm.contractFile = res.data.fileUrl
      }else{
         this.$message.error('上传失败');
      }
      },
       PaymentContract(file) {//查看合同
        this.PaymentContractImageUrl = file.url;
        this.PaymentContractVisible = true;
      },
      uploadChange(file, fileList) {
        console.log(fileList)
        
            this.headFile = file;
            this.headFileList = fileList;
            if(fileList.length==1) {
               console.log(fileList.length)
                let {PaymentContractcss, ...data} = this.rules.PaymentContractcss;
                this.rules.PaymentContractcss = data;
                console.log(data)
            }
            this.$refs.ruleForm.clearValidate('PaymentContractcss');
            this.hideUpload = fileList.length >= this.limitCount;
        },
      async confirm(){//提交添加分销供应商资质
          console.log(this.ruleForm.id)
          console.log(this.ruleForm)
          let res = await merchantss(this.ruleForm)
            if(res.code == 200){
            // this.$message(res.msg)
            // console.log(res)
            this.$router.go(-1);
          }
      },
        
    submitForm(formNames) {//提交按钮
      this.$refs[formNames].validate(valid => {
        if (valid && this.checked) {
            this.confirm()
        } else{
            this.$message.error("请填写完信息！");
            return false;
        }
      })
         
    },
    cancel(){
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped lang="scss">
.all {
  box-sizing: border-box;
  padding: 15px;
}
.informa {
  width: 100%;

  height: auto;
  background-color: #fff;
  background-color: #fff;
  margin-top: 25px;
  border-radius: 6px;
  padding: 15px;
  -webkit-box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  padding-bottom: 40px;
}
 .phones ::v-deep .el-form-item__content {
   display: inline-flex;
} 
 .informa ::v-deep .el-form-item__label {
   width: 150px !important;
 } 
.el-form-item{
  display: inline;
}
 .el-input{
  width:40vw !important;
  
}
.el-form-item__label{
  padding:0px !important;
}
.tetli{
  height: 60px;
  line-height: 60px;
  font-weight: bold;
  border-bottom: 2px solid #F6F6F6;
  margin-bottom: 30px;
}
.aptitudes{
 .updata{
   display: inline-block;
   width:40%;
 }
}

.agree{
   margin-top: 30px;
}
::v-deep .el-form-item--medium .el-form-item__content{
  width: 75%;
}
</style>
